<!doctype html>
<html lang="en" class="x-admin-sm">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>订单信息统计</title>
    <link rel="stylesheet" href="./assets/css/font.css" />
    <link rel="stylesheet" href="./assets/css/xadmin.css" />
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />

</head>

<body>
    <div id="app">
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="javascript:">管理系统</a>
                <a href="javascript:">订单信息</a>
                <a><cite>订单信息统计</cite></a>
            </span>
        </div>
        <div style="margin-top:8px;"></div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" id="start" v-model="start" placeholder="请输入开始日期" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" id="end" v-model="end" placeholder="请输入结束日期" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" title="查询" @click="query()"><i class="layui-icon">&#xe615;</i> 查询</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table">
                                <tr>
                                    <td style="text-align: center">
                                        <div class="text-center" id="chartmain" style="width: 99%; height: 600px;"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./assets/echart/echarts.min.js"></script>
    <script type="text/javascript" src="./assets/layui/layui.js"></script>
    <script type="text/javascript" src="./assets/js/axios.min.js"></script>
    <script type="text/javascript" src="./assets/js/vue.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript">
        layui.use(['table', 'laydate'], function() {
            var table = layui.table;
            var laydate = layui.laydate;
            table.render({});
            laydate.render({
                elem: "#start",
                type: "date"
            });
            laydate.render({
                elem: "#end",
                type: "date"
            });
        })
        const vue = new Vue({ // 实例化Vue对象
            el: '#app', // 绑定作用域
            data: { //定义数据 用于vue的双向绑定
                start: '', //查询关键字
                end: '',
            },
            created() { // 生命周期相关的函数
            },
            methods: {
                // 关键字查询开始
                query: function() {
                    let _this = this;
                    var data = {
                        start: $('#start').val(),
                        end: $('#end').val(),
                    };
                    axios.post('http://localhost:8080/vue_gxhfztjxt/chart/chartOrders.action', data).then(result => {
                        let days = result.data.days.replace("[", "").replace("]", "").replace("{", "").replace("}", "").replaceAll("\"", "").split(",");
                        let total = result.data.total.replace("[", "").replace("]", "").replace("{", "").replace("}", "").replaceAll("\"", "").split(",");
                        let option = {
                            title: {
                                text: '订单信息统计',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c}'
                            },
                            legend: {
                                left: 'left',
                            },
                            xAxis: {
                                type: 'category',
                                name: 'x',
                                splitLine: {
                                    show: false
                                },
                                data: days
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '订单金额',
                                type: 'bar',
                                data: total
                            }]
                        };
                        // 初始化echarts实例
                        let myChart = echarts.init(document.getElementById('chartmain'));
                        // 使用制定的配置项和数据显示图表
                        myChart.setOption(option);
                    });
                },
                // 关键字查询结束
            },
        });
    </script>

</body>

</html>